        
        
        .shave{
            position: fixed;
            width:100%;
            height: 100%;
            background: rgb(250,250,250);
            top:0px;

        }
        body>.container{
            position: relative;
            z-index: 2;
        }
        main .library{
            padding-top: 70px;
            padding-bottom: 120px;
        }
        main .library .title>.line{
            width: 40px;
            height: 2px;
            background: #000;
            display: block;
            margin-bottom: 40px;
        }
        main .library.ready .title .line,
        main .library.ready .title .txt{
            transition: all ease 1s .5s;
        }
        main .library.ready .title .line{
            transform: translateX(20px);
            opacity: 0;
        }
        main .library.ready .title .txt{
            transform: translateY(20px);
            opacity: 0;
        }
        main .library.frozen .title .line{
            transform: translateX(0px);
            opacity: 1;
        }
        main .library.frozen .title .txt{
            transform: translateY(0px);
            opacity: 1;
        }
        main .library.ready .title .txt p{
            opacity: 0;
            transition: all ease .5s 1.5s;
        }
        main .library.ready.frozen .title .txt p{
            opacity: 1;
        }
        main .library .title .txt p{
            float: left;
        }
        main .library .title .txt p span:first-child{
            height: 36px;
            display: block;
            line-height: 36px;
        }
        main .library .title .txt p span:last-child{
            height: 30px;
            margin-top: 30px;
            font-weight: bold;
        }
        main .library .title .txt p:first-child{
            padding-right: 40px;
        }
        main .library .title .txt p:first-child span:first-child{
            font-size: 36px;
        }
        main .library .title .txt p:first-child span:last-child{
            font-size: 30px;
        }
        main .library .title .txt p:last-child span{
            font-size: 24px;
            padding-left: 40px;
        }
        main .library .title .txt .verticalLine{
            width: 2px;
            background: #000;
            display: block;
        }
        main .library .nav{
            overflow: hidden;
        }
        main .library .nav li{
            margin-top: 70px;
            width: 21%;
            float: left;
        }
        main .library .nav li span{
            display: inline-flex;
            cursor: pointer;
            transition: all ease .5s;
            font-size: 16px;
        }
        main .library .nav li span:hover .line{
            transform: rotate(30deg);
        }
        main .library .nav li .line{
            width: 40px;
            height: 1px;
            background: #000;
            display: block;
            margin-right: 20px;
            transition: all ease .5s;
        }
        main .library .nav li.active span{
            color:#e50012;
        }
        main .library .nav li.active .line{
            background: #e50012;
        }
       
        main .library .contn .box{
            overflow: hidden;
            padding-top: 70px;
            padding-bottom: 180px;
        }
        
        main .library .contn .box .item{
            float: left;
            width: 100%;
        }
        main .library .contn .box .item + .item{
            margin-top: 120px;
        }
        main .library .contn .box .item .example{
            display: block;
            width:460px;
            position: relative;
            opacity: 0;
            transform: scale(0);
            transition: opacity 1s ease .5s,left 1s ease .5s,transform .7s cubic-bezier(0.7, 0, 0.3, 1);
            transform-origin: left bottom;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            white-space: normal;
            word-break: break-all;
        }
        main .library .contn .box .item .example>*{
            opacity: 0;
            transition: opacity .7s cubic-bezier(0.7, 0, 0.3, 1);
        }
        main .library .contn .box .item:nth-child(3) .example{
            transition: opacity 1s ease .5s,left 1s ease .5s,transform .7s cubic-bezier(0.7, 0, 0.3, 1) .1s;
        }
        main .library .contn .box .item:nth-child(2) .example{
            transition: opacity 1s ease .5s,left 1s ease .5s,transform .7s cubic-bezier(0.7, 0, 0.3, 1) .2s;
        }
        main .library .contn .box .item:nth-child(1) .example{
            transition: opacity 1s ease .5s,left 1s ease .5s,transform .7s cubic-bezier(0.7, 0, 0.3, 1) .3s;
        }
        main .library .contn .box .item:nth-child(3) .example>*{
            transition-delay:.1s;
        }
        main .library .contn .box .item:nth-child(2) .example>*{
            transition-delay:.2s;
        }
        main .library .contn .box .item:nth-child(1) .example>*{
            transition-delay:.3s;
        }
        main .library .contn .box .item:nth-child(odd) .example{
            transform-origin: right bottom;
        }
        main .library .contn .box .item:nth-child(even) .example{
            float: right;
        }
        main .library .contn .box.current .item .example{
            transform:scale(1);
        }
        main .library .contn .box.current .item .example>*{
            opacity: 1;
        }
        main .library .contn .box .item:nth-child(odd).ready .example{
            left: -460px;
        }
        main .library .contn .box .item:nth-child(even).ready .example{
            left: 460px;
        }
        
        main .library .contn .box .item .example .pic{
            padding-bottom:100%;
            position: relative;
        }
        main .library .contn .box .item:nth-child(even) .example .pic{
            padding-bottom:140%;
        }
        main .library .contn .box .item .example .pic img{
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        main .library .contn .box .item .example .place{
            position: absolute;
            padding-top: 65px;
            padding-bottom: 65px;
            top: calc(50% + 40px);
            width: 370px;
        }
        main .library .contn .box .item:nth-child(even) .example .place{
            right: 100%;
            transform: translate(50px,-50%);
            padding-left:50px;
            padding-right: 80px;
        }
        main .library .contn .box .item:nth-child(even) .example .place{
            top:calc(50% + 100px);
        }
        main .library .contn .box .item:nth-child(odd) .example .place{
            left: 100%;
            padding-left:80px;
            padding-right: 50px;
            transform: translate(-50px,-50%);
        }
        main .library .contn .box .item .example .place .content .line{
            width: 40px;
            height: 2px;
            display:block;
            background: #000;
        }
        main .library .contn .box .item .example .place .content h5{
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 25px;
            min-height: 62px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
        }
        main .library .contn .box .item .example .place .content p{
            font-size: 14px;
            line-height: 130%;
            min-height: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            white-space: normal;
            word-break: break-all;
        }
        main .library .contn .box .item .example .border,
        main .library .contn .box .item .example .place .border{
            
            background:#e50012;
           
        }
        
        main .library .contn .box .item .example>.horizontal,
        main .library .contn .box .item .example .place>.horizontal{
            height: 4px;
        }
        main .library .contn .box .item .example>.vertical,
        main .library .contn .box .item .example .place>.vertical{
            width: 4px;
        }
        
        @media(max-width:950px){
            main .library .contn .box .item .example{
                width: 400px;
            }
            main .library .contn .box .item:nth-child(odd).ready .example{
                left: -400px;
            }
            main .library .contn .box .item:nth-child(even).ready .example{
                left: 400px;
            }
            main .library .contn .box .item .example .place{
                padding-top: 45px;
                padding-bottom: 45px;
                width: 300px;
            }
            main .library .contn .box .item:nth-child(odd) .example .place{
                transform: translate(-25px,-50%);
                padding-left:40px;
                padding-right:15px;
            }
            main .library .contn .box .item:nth-child(even) .example .place{
                transform: translate(25px,-50%);
                padding-left:15px;
                padding-right:40px;
            }
        }

        @media(max-width:767px){
            main .library{
                padding-bottom: 60px;
            }
            main .library .nav li span{
                font-size: 14px;
            }
            main .library .contn .box ul{
                padding-top: 50px;
                padding-bottom: 90px;
            }
            main .library .contn .box .item .example{
                width: 100%;
            }
            main .library .contn .box .item:nth-child(odd).ready .example{
                left: -100%;
            }
            main .library .contn .box .item:nth-child(even).ready .example{
                left: 100%;
            }
            main .library .contn .box .item:nth-child(odd) .example .place{
                position: relative;
                transform: initial;
                width: 90%;
                left:30%;
            }
            main .library .contn .box .item .example{
                width: 80%;
            }
            main .library .contn .box .item .example .pic{
                margin-bottom: -10px;
            }
            main .library .contn .box .item:nth-child(odd) .example .place,
            main .library .contn .box .item:nth-child(even) .example .place{
                padding:25px 15px;
            }
            main .library .contn .box .item:nth-child(even) .example .place{
                position: relative;
                right: 10%;
                width: 90%;
                transform: initial;
                float: right;
            }
            main .library .contn .box .item .example .place .content h5{
                font-size: 20px;
                line-height: 52px;
            }
            main .library .title .txt p:first-child span:first-child{
                font-size: 28px;
            }
            main .library .title .txt p:last-child span{
                font-size: 20px;
            }
            main .library .title .txt p:first-child span:last-child,
            main .library .title .txt p:last-child span{
                font-size: 14px;
            }
            main .library .title .txt p:first-child{
                padding-right: 20px;
            }
            main .library .title .txt p:last-child span{
                padding-left: 20px;
            }
            main .library .title .txt p span:last-child{
                margin-top: 20px;
            }
            main .library .nav li{
                width: 100%;
            }
            main .library .nav li + li{
                margin-top: 30px;
            }
        }

        main .library .contn .box .item:nth-child(odd).frozen .example,
        main .library .contn .box .item:nth-child(even).frozen .example{
            left: 0%;
            opacity: 1;
        }